<!--
 * @Descripttion: 表格选择器组件演示
 * @version: 1.0
 * @Author: sakya
 * @Date: 2021年6月8日09:29:14
 * @LastEditors: sakya
 * @LastEditTime: 2021年6月8日09:29:14
-->

<template>
	<el-main>
		<el-alert
			title="select深度改造的表格选择器, 非常适用于大量数据选择的场景"
			type="success"
			style="margin-bottom: 20px"
		></el-alert>
		<el-card shadow="never" header="单选">
			<sc-table-select
				v-model="value2"
				:apiObj="apiObj"
				:params="params"
				:table-width="600"
				:props="props"
				@change="change"
			>
				<el-table-column prop="id" label="ID" width="180"></el-table-column>
				<el-table-column prop="user" label="姓名"></el-table-column>
			</sc-table-select>
		</el-card>
		<div style="height: 15px"></div>
		<el-card shadow="never" header="多选">
			<sc-table-select
				v-model="value"
				:apiObj="apiObj"
				:table-width="700"
				multiple
				clearable
				collapse-tags
				collapse-tags-tooltip
				:props="props"
				@change="change"
			>
				<template #header="{ form, submit }">
					<el-form :inline="true" :model="form">
						<el-form-item>
							<el-select v-model="form.sex" placeholder="性别" clearable :teleported="false">
								<el-option label="男" value="1"></el-option>
								<el-option label="女" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-date-picker
								v-model="form.date"
								value-format="YYYY-MM-DD"
								type="date"
								placeholder="注册时间"
								:teleported="false"
							></el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submit">查询</el-button>
						</el-form-item>
					</el-form>
					<el-alert title="自定义FORM插糟 传递了form对象和提交方法" type="info" />
				</template>
				<el-table-column prop="id" label="ID" width="180"></el-table-column>
				<el-table-column prop="user" label="姓名" width="100"></el-table-column>
				<el-table-column prop="cip" label="最后请求IP" width="150"></el-table-column>
				<el-table-column prop="time" label="注册时间"></el-table-column>
			</sc-table-select>
		</el-card>
	</el-main>
</template>

<script>
export default {
	name: 'tableselect',
	data() {
		return {
			apiObj: this.$API.demo.page,
			params: {
				name: 'demoName'
			},
			value: [
				{
					id: '410000199512025445',
					user: '魏磊'
				},
				{
					id: '520000198407304275',
					user: '史平'
				}
			],
			value2: {
				id: '520000198407304275',
				user: '史平'
			},
			props: {
				label: 'user',
				value: 'id',
				keyword: 'keyword'
			}
		}
	},
	computed: {},
	mounted() {},
	methods: {
		//值变化
		change(val) {
			this.$message('change事件，返回详情查看控制台')
			console.log(val)
		}
	}
}
</script>

<style scoped></style>
